<script setup>
import Tabbar from "../component/Tabbar.vue";
import { ref, onMounted } from 'vue';

const status = ref(0); // 0: 未到时段，1: 不在区域，2: 已签到
const canSign = ref(false);
const btnText = ref('签到');

const getStatusText = () => {
  if (status.value === 0) return '当前未到签到时段，请稍候';
  if (status.value === 1) return '当前未在签到区域内，请前往';
  return '当前已完成签到，明日请继续';
};
const statusText = ref(getStatusText());

const handleSign = () => {
  if (canSign.value) {
    status.value = 2;
    canSign.value = false;
    btnText.value = '已签到';
    statusText.value = getStatusText();
  }
};

onMounted(() => {
  canSign.value = true;
  statusText.value = getStatusText();
});
</script>


<template>

  <view class="sign-page">

    <image
        class="map-img"
        src="/static/image/map.png"
        mode="widthFix"
    ></image>

    <view class="status-tip">{{ statusText }}</view>

    <view class="time-card">

      <view class="time-slot">
        本学院签到时间段<br />8:00-12:00
      </view>

      <view class="sign-time">
        签到时间<br />无
      </view>

    </view>

    <view class="user-section">

      <view class="user-avatar">李</view>

      <view class="user-info">
        <text class="user-name">李晓明</text>
        <text class="user-date">2024-01-23 星期三</text>
      </view>

      <button
          class="sign-btn"
          :disabled="!canSign"
          :class="{'signed': !canSign}"
          @click="handleSign"
      >
        {{ btnText }}
      </button>

    </view>
  </view>

  <view>
    <Tabbar :cur-index="1"/>
  </view>

</template>

<style scoped>
.sign-page {
  display: flex;
  flex-direction: column;
  height: 85vh;
  overflow: hidden;
}

.map-img {
  flex: 1;
  width: 100%;
  height: 50%;
}

.status-tip {
  padding: 15px;
  font-size: 14px;
  color: #333;
  background-color: #f9f9f9;
  margin-bottom: 5px;
}

.time-card {
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.time-slot, .sign-time {
  width: 45%;
  padding: 15px 0;
  text-align: center;
  border-radius: 8px;
  color: #fff;
}

.time-slot {
  background-color: #50bfff;
}

.sign-time {
  background-color: #ffb62a;
}

.user-section {
  display: flex;
  align-items: center;
  padding: 15px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background-color: #dcdcdc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.user-date {
  font-size: 12px;
  color: #999;
}

.sign-btn {
  width: 80px;
  height: 35px;
  line-height: 35px;
  padding: 0;
  border-radius: 5px;
  background-color: #dcdcdc;
  color: #666;
}

.sign-btn.signed {
  background-color: #bbb;
  color: #fff;
}
</style>